<template>
  <div class="history-container">
    <!-- 顶部标题区域 -->
    <div class="header-section">
      <h2 class="main-title">非遗文化历史回顾</h2>
      <p class="subtitle">传承千年文明，守护文化瑰宝</p>
    </div>

    <!-- 时间轴筛选 -->
    <div class="filter-section">
      <el-radio-group v-model="selectedPeriod" class="period-filter">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="year">年度回顾</el-radio-button>
        <el-radio-button label="month">月度回顾</el-radio-button>
      </el-radio-group>
      
      <el-select v-model="selectedYear" placeholder="选择年份" class="year-select">
        <el-option
          v-for="year in years"
          :key="year"
          :label="year + '年'"
          :value="year"
        />
      </el-select>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-section">
      <el-timeline>
        <el-timeline-item
          v-for="event in filteredEvents"
          :key="event.id"
          :timestamp="event.date"
          :type="event.type"
          :color="event.color"
          :hollow="event.hollow"
          placement="top"
          :size="event.size"
        >
          <el-card class="history-card" :body-style="{ padding: '0px' }">
            <div class="card-content">
              <div class="card-header">
                <h3 class="event-title">{{ event.title }}</h3>
                <el-tag :type="event.tagType" size="small">{{ event.category }}</el-tag>
              </div>
              
              <div class="event-content">
                <p class="event-description">{{ event.description }}</p>
                <div class="event-images" v-if="event.images && event.images.length">
                  <el-image
                    v-for="(img, index) in event.images"
                    :key="index"
                    :src="img"
                    :preview-src-list="event.images"
                    fit="cover"
                    class="event-image"
                  />
                </div>
              </div>

              <div class="card-footer">
                <div class="event-meta">
                  <el-tag size="small" type="info">
                    <el-icon><Location /></el-icon>
                    {{ event.location }}
                  </el-tag>
                  <el-tag size="small" type="info">
                    <el-icon><User /></el-icon>
                    {{ event.organizer }}
                  </el-tag>
                </div>
                <el-button 
                  type="primary" 
                  link
                  @click="showEventDetail(event)"
                >
                  查看详情
                </el-button>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- 事件详情弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="selectedEvent?.title"
      width="60%"
      class="event-dialog"
    >
      <div class="event-detail" v-if="selectedEvent">
        <div class="detail-header">
          <div class="detail-meta">
            <el-tag :type="selectedEvent.tagType">{{ selectedEvent.category }}</el-tag>
            <span class="detail-date">{{ selectedEvent.date }}</span>
          </div>
          <div class="detail-location">
            <el-icon><Location /></el-icon>
            {{ selectedEvent.location }}
          </div>
        </div>

        <div class="detail-content">
          <p class="detail-description">{{ selectedEvent.description }}</p>
          
          <div class="detail-gallery" v-if="selectedEvent.images">
            <el-carousel :interval="4000" type="card" height="300px">
              <el-carousel-item v-for="(img, index) in selectedEvent.images" :key="index">
                <el-image :src="img" fit="cover" class="carousel-image" />
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="detail-info">
            <h4>活动详情</h4>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="主办方">{{ selectedEvent.organizer }}</el-descriptions-item>
              <el-descriptions-item label="参与人数">{{ selectedEvent.participants }}</el-descriptions-item>
              <el-descriptions-item label="活动时长">{{ selectedEvent.duration }}</el-descriptions-item>
              <el-descriptions-item label="活动规模">{{ selectedEvent.scale }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Location, User } from '@element-plus/icons-vue';

// 状态管理
const selectedPeriod = ref('all');
const selectedYear = ref(new Date().getFullYear());
const dialogVisible = ref(false);
const selectedEvent = ref(null);

// 数据
const years = [2023, 2022, 2021, 2020, 2019];

const pastEvents = ref([
  {
    id: 1,
    title: '非遗文化展览会',
    date: '2023-09-01',
    description: '展示各类非遗项目，包括传统技艺、传统美术、传统音乐等多个类别，吸引了众多观众参观。',
    category: '展览活动',
    tagType: 'success',
    type: 'primary',
    color: '#67C23A',
    hollow: false,
    size: 'large',
    location: '北京国家博物馆',
    organizer: '中国非遗保护中心',
    images: [
      'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg',
      'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg'
    ],
    participants: '5000+',
    duration: '3天',
    scale: '国家级'
  },
  {
    id: 2,
    title: '非遗传承人技艺展示',
    date: '2023-08-15',
    description: '邀请多位非遗传承人现场展示传统技艺，包括剪纸、泥塑、刺绣等，让观众近距离感受非遗魅力。',
    category: '技艺展示',
    tagType: 'warning',
    type: 'success',
    color: '#E6A23C',
    hollow: true,
    size: 'normal',
    location: '上海文化中心',
    organizer: '上海市文化局',
    images: [
      'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg'
    ],
    participants: '2000+',
    duration: '2天',
    scale: '省级'
  },
  {
    id: 3,
    title: '非遗保护研讨会',
    date: '2023-07-20',
    description: '专家学者齐聚一堂，共同探讨非遗保护与传承的新思路、新方法。',
    category: '学术研讨',
    tagType: 'info',
    type: 'info',
    color: '#909399',
    hollow: false,
    size: 'normal',
    location: '广州文化馆',
    organizer: '广东省非遗保护中心',
    participants: '300+',
    duration: '1天',
    scale: '省级'
  }
]);

// 计算属性
const filteredEvents = computed(() => {
  let events = pastEvents.value;
  
  if (selectedPeriod.value !== 'all') {
    const currentYear = selectedYear.value;
    events = events.filter(event => {
      const eventDate = new Date(event.date);
      if (selectedPeriod.value === 'year') {
        return eventDate.getFullYear() === currentYear;
      } else {
        return eventDate.getFullYear() === currentYear && 
               eventDate.getMonth() === new Date().getMonth();
      }
    });
  }
  
  return events;
});

// 方法
const showEventDetail = (event) => {
  selectedEvent.value = event;
  dialogVisible.value = true;
};
</script>

<style scoped>
.history-container {
  @apply min-h-screen bg-gray-50;
}

.header-section {
  @apply text-center py-8 bg-white shadow-sm;
}

.main-title {
  @apply text-3xl font-bold text-gray-800 mb-2;
}

.subtitle {
  @apply text-gray-600;
}

.filter-section {
  @apply bg-white p-4 flex justify-between items-center shadow-sm;
}

.period-filter {
  @apply flex gap-2;
}

.year-select {
  @apply w-40;
}

.content-section {
  @apply max-w-4xl mx-auto p-6;
}

.history-card {
  @apply transition-all duration-300 hover:shadow-lg;
}

.card-content {
  @apply p-4;
}

.card-header {
  @apply flex justify-between items-start mb-4;
}

.event-title {
  @apply text-xl font-semibold text-gray-800;
}

.event-content {
  @apply space-y-4;
}

.event-description {
  @apply text-gray-600 leading-relaxed;
}

.event-images {
  @apply flex gap-2 overflow-x-auto pb-2;
}

.event-image {
  @apply w-24 h-24 rounded-lg object-cover;
}

.card-footer {
  @apply flex justify-between items-center mt-4 pt-4 border-t border-gray-100;
}

.event-meta {
  @apply flex gap-2;
}

.event-dialog {
  :deep(.el-dialog__body) {
    @apply p-6;
  }
}

.detail-header {
  @apply mb-6;
}

.detail-meta {
  @apply flex items-center gap-4 mb-2;
}

.detail-date {
  @apply text-gray-500;
}

.detail-location {
  @apply flex items-center gap-1 text-gray-600;
}

.detail-content {
  @apply space-y-6;
}

.detail-description {
  @apply text-gray-700 leading-relaxed;
}

.detail-gallery {
  @apply my-6;
}

.carousel-image {
  @apply w-full h-full;
}

.detail-info {
  @apply mt-6;
}

.detail-info h4 {
  @apply text-lg font-semibold mb-4;
}

:deep(.el-timeline-item__node) {
  @apply shadow-md;
}

:deep(.el-timeline-item__tail) {
  @apply border-l-2;
}

:deep(.el-timeline-item__timestamp) {
  @apply text-gray-500;
}

:deep(.el-carousel__item) {
  @apply rounded-lg overflow-hidden;
}

:deep(.el-descriptions__label) {
  @apply bg-gray-50;
}
</style> 